<template>
	<view class="priview-box" >
		<phoneSimuHead ref="phoneSimuHead" :titleTxt="titleTxt" @active="active" :curId="curEditId"></phoneSimuHead>
		<view class="middle-box">
			<view class="box">
				<view class="pw-tit-txt" 
					@click="curEditId = action.editActiveEnterPwTit; isEdit = true">{{pwTitleText}}</view>
				<input class="pw-input"
					type="text" 
					maxlength="6" 
					disabled="false" 
					placeholder="请输入"
					v-model="pw"
					@click="edit({act:action.editActiveEnterPw,data:{}}); curEditId = action.editActiveEnterPw;"/>
				<view class="enter-btn">进入活动</view>
				<view class="pw-title-edit" 
					  @click.stop="edit({act:action.editActiveEnterPwTit,data:{type:type,title:pwTitleText}})" 
					  v-if="curEditId == action.editActiveEnterPwTit && isEdit">编辑内容</view>
				<view class="pw-title-line" v-if="curEditId == action.editActiveEnterPwTit"></view>
				<view class="pw-input-line" v-if="curEditId == action.editActiveEnterPw"></view>
			</view>
		</view>
		<eidtActivePwTitle ref="eidtActivePwTitle" @updateActivePwTit="updateActivePwTit"></eidtActivePwTitle>
	</view>	
</template>

<script>

let timeout = null;
import phoneSimuHead from "@/components/interactive/appComponrnts/phone-simulation-head.vue";
import eidtActivePwTitle from "@/components/interactive/appComponrnts/eidt-active-pw-title.vue";
import editInterActive from "@/js/inieractive/EditInteractive.js";
export default {
	components:{phoneSimuHead,eidtActivePwTitle},
    data() {
        return {
			action:editInterActive.action,
			barTimeTxt:"",
			titleTxt:"",
			pwTitleText:"输入活动密码后进入活动",
			isEdit : "",
			curEditId:"",
			pw:"",
			type:"1",
		};
    },
    created() {},
    mounted() {
		this.init();
	},
    methods: {
		active(act)
		{
			console.log("act==============:",act);
			this.curEditId = act;
			this.isEdit = true;
		},
		
		init()
		{
			uni.$on('init_active_title',(data)=>{
				this.titleTxt = data;
			});
		},
		
		initData(data)
		{
			this.pw = data.v;
			this.type = data.type;
			this.pwTitleText = data.title;
		},
		
		/***滚动的时候隐藏***/
		handlerScroll()
		{

		},
		
		clickTabBar(index)
		{

		},
		
		edit(value)
		{
			if(value.act == this.action.editActiveEnterPwTit)
			{
				this.$refs.eidtActivePwTitle.showWin(value);
			}
			else if(value.act == this.action.editActiveEnterPw)
			{
				editInterActive.eidt(value);
			}
		},
		
		updateActivePwTit(data)
		{
			this.pwTitleText = data.data;
			editInterActive.eidt(data);
		},
		
		// 防抖
		testFun(fun, value,time = 500) {
		    if (timeout) {
		        clearTimeout(timeout); // 规定时间内若定时器存在则清除
		    }
		    timeout = setTimeout(() => {
		        fun(value); // 调用接口
		    }, time);
		},
		
				
		onMouseEnter(event) 
		{
			if(this.isEdit)return;
			this.curEditId = event.currentTarget.id;
		},
		
		onMouseLeave(event)
		{
			if(this.isEdit)return;
			this.curEditId = "";
		},
		
		showLineBox(value)
		{
				
		},
		
		onLoadBanner(e)
		{
			
		},
		
		active(data)
		{
		
		},
	},
};
</script>

<style lang="scss" scoped >
.priview-box {
    width: 100%;
    height: 100%;
	position: relative;
	// height: calc(100% -176upx);
	.statuts-bar-box
	{
		height: 176upx;
		width: 100%;
		background-color: #FFF;
		position: relative;
		cursor: pointer;
		.s-b-b
		{
			display: flex;
			justify-content: space-between;
			padding: 38upx 20upx;
			.time-txt
			{
				
			}
			.pw-per-box
			{
				color: #AAA;
				display: flex;
				align-items: center;
				view
				{
					padding-right: 10upx;
				}
				image
				{
					width: 52upx;
					height: 20upx;
				}
			}
		}
		.tit-txt
		{
			text-align: center;
			cursor: pointer;
			font-size: 28upx;
		}
	}
	
	.middle-box
	{
		width: 100%;
		height: 1332upx;//100%;
		// margin: 20upx;
		position: relative;
		cursor: pointer;
		background-color: rgba(0, 0, 0, .7);
		display: flex;
		align-items: center;
		justify-content: center;
		.box
		{
			height: 400upx;
			width: calc(100% - 60upx);
			border-radius: 10upx;
			background-color: #FFF;
			position: relative;
			.pw-tit-txt
			{
				margin: 40upx;
				font-size: 30upx;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space:nowrap;
			}
			.pw-input
			{
				margin: 0 40upx;
				border: 1upx solid #EEE;
				padding: 20upx 10upx;
				cursor: pointer;
			}
			.enter-btn
			{
				position: absolute;
				bottom: 40upx;
				height: 60upx;
				width: 200upx;
				line-height: 60upx;
				border-radius: 30upx;
				background-color: #3388FF;
				color: #FFF;
				text-align: center;
				font-size: 30upx;
				left: 0;
				right: 0;
				margin: auto;
			}
			
			.pw-title-line
			{
				position: absolute;
				top: 34upx;
				left: 0;
				right: 0;
				margin: auto;
				height: 60upx;
				width:calc(100% - 30upx);
				border: 1upx dashed #000;
				pointer-events: none;
			}
			
			.pw-input-line
			{
				position: absolute;
				top: 132upx;
				left: 0;
				right: 0;
				margin: auto;
				height: 90upx;
				width:calc(100% - 30upx);
				border: 1upx dashed #000;
				pointer-events: none;
			}
			
			.pw-title-edit
			{
				padding: 2upx 30upx;
				cursor: pointer;
				position: absolute;
				top: -20upx;
				right: 20upx;
				background-color:#000;
				border-radius: 8upx;
				color: #FFF;
			}
		}
	}
}
</style>
